<template>
    <div class="invoice-add">
        <van-nav-bar
            title="新增发票抬头"
            left-arrow
            right-text="保存"
            @click-left="$router.go(-1)"
            @click-right="onSave"
        />

        <van-field label="抬头类型">
            <template #input>
                <van-tag
                    plain
                    :type="selectType === 1 ? 'primary' : 'default'"
                    @click="selectType = 1"
                    >企业</van-tag
                >

                <van-tag
                    plain
                    :type="selectType === 2 ? 'primary' : 'default'"
                    @click="selectType = 2"
                    >非企业性单位</van-tag
                >

                <van-tag
                    plain
                    :type="selectType === 3 ? 'primary' : 'default'"
                    @click="selectType = 3"
                    >个人</van-tag
                >
            </template>
        </van-field>

        <van-field
            v-model="name"
            label="抬头名称"
            placeholder="请输入发票抬头"
            clearable
            @clear="name = ''"
        />

        <van-field
            v-model="sn"
            label="税号"
            placeholder="请输入税号"
            clearable
            @clear="sn = ''"
        />

        <van-field v-model="email" label="邮箱" placeholder="请输入邮箱" />

        <van-field
            label="需要增值税专用发票"
            input-align="right"
            label-width="150"
        >
            <template #input>
                <van-switch v-model="is_zz" size="20" />
            </template>
        </van-field>

        <van-field label="是否默认" input-align="right" label-width="100">
            <template #input>
                <van-switch v-model="is_mr" size="20" />
            </template>
        </van-field>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectType: 1,
            name: "",
            sn: "",
            email: "",
            is_zz: false,
            is_mr: false,
        };
    },
    methods: {
        async onSave() {
            const { selectType, name, sn, email, is_zz, is_mr } = this;
            const data = {
                type: selectType,
                name,
                sn,
                email,
                is_zz: is_zz ? 1 : 0,
                is_mr: is_mr ? 1 : 0,
            };
            if (!/^\w+@\w+\.com$/.test(email)) {
                this.$toast.fail("邮箱格式不正确");
                return;
            }
            const { data: res } = await this.$http.post("/invoices", data);
            if (res.code !== 201) {
                this.$toast.fail(res.message);
                return;
            }
            // 添加成功
            this.$toast.success(res.message);
            // 跳转到列表
            this.$router.push("/invoice/list");
        },
    },
};
</script>

<style lang="less" scoped>
.invoice-add {
    min-height: 100vh;
    height: 100%;
    background-color: #f5f5f5;

    .van-field {
        margin-top: 15px;
    }

    .van-tag {
        margin-right: 15px;
    }
}
</style>
